import { ChangeEvent, useEffect, useState } from 'react';
import { Input, Space, Button, FloatButton } from 'antd';
import { useNavigate } from "react-router-dom"
import styles from "./index.module.scss";
import initLoginBg from "./init";
import './index.less'
import { CaptchaAPI, LoginAPI } from "@/request/api";
const Index = () => {
  const navigateTo = useNavigate() // 路由
  // 获取用户输入的信息
  const [usernameVal, setUsernameVal] = useState(''); // 定义用户输入用户名这个变量
  const [passwordVal, setPasswordVal] = useState(''); // 定义用户输入密码这个变量
  const [captchaVal, setCaptchaVal] = useState(''); // 定义用户输入验证码这个变量
  // 定义一个变量保存验证码图片信息
  const [captchaImg, setCaptchaImg] = useState('');

  useEffect(() => {
    initLoginBg()
    window.onresize = () => { initLoginBg() }
    // 获取验证码
    getCaptchaImg();
  }, [])



  const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setUsernameVal(e.target.value)
  }
  // 获取密码
  const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPasswordVal(e.target.value)
  }
  const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
    setCaptchaVal(e.target.value)
  }
  // 获取验证码
  const getCaptchaImg = async () => {
    const res = await CaptchaAPI()
    if (res.code === 200) {
      // 1、把图片数据显示在img上面
      setCaptchaImg("data:image/gif;base64," + res.img)
      // 2、本地保存uuid，给登录的时候用
      localStorage.setItem("uuid", res.uuid) // 保存uuid,或者说token
    }
  }

  // 获取数据

  const gotoLogin = async () => {
    console.log("用户输入的用户名，密码，验证码分别是：", usernameVal, passwordVal, captchaVal);
    // 验证是否有空值
    if (!usernameVal.trim() || !passwordVal.trim() || !captchaVal.trim()) {
      // message.warning("请完整输入信息！")
      return
    }
    // 测试账号 qdtest1,密码 123456
    // 发起登录请求
    let loginAPIRes = await LoginAPI({
      username: usernameVal,
      password: passwordVal,
      code: captchaVal,
      uuid: localStorage.getItem("uuid") as string
    })

    console.log(loginAPIRes);
    if (loginAPIRes.code === 200) {
      // 1、提示登录成功
      // message.success("登录成功！")
      // 2、保存token
      localStorage.setItem("liuyangong-token", loginAPIRes.token)
      // 3、跳转到/page1
      navigateTo("/page1")
    } else {
      // message.warning(loginAPIRes.msg)
    }
    // 4、删除本地保存中的uuid
    localStorage.removeItem("uuid")
  }


  return (
    <div className={styles.loginPage}>
      <FloatButton/>
      {/* 存放背景 */}
      <canvas id="canvas" style={{ display: "block" }}></canvas>
      {/* 登录盒子 */}
      <div className={styles.loginBox + " loginbox"}>
        {/* 标题部分 */}
        <div className={styles.title}>
          <h1>鎏嫣宫&nbsp;·&nbsp;通用后台系统</h1>
          <p>做自己 快乐就好！</p>
        </div>
        {/* 表单部分 */}
        <div className="form">
          <Space direction="vertical" size="large" style={{ display: 'flex' }}>
            <Input placeholder="用户名" onChange={usernameChange} />
            <Input.Password placeholder="密码" onChange={passwordChange} />
            {/* 验证码盒子 */}
            <div className="captchaBox">
              <Input placeholder="验证码" onChange={captchaChange} />
              <div className="captchaImg" onClick={getCaptchaImg}>
                <img height="38" src={captchaImg} alt="" />
              </div>
            </div>
            <Button size="small" type="primary" className="loginBtn" onClick={gotoLogin}>登录</Button>
          </Space>
        </div>
      </div>
    </div>
  )
}
export default Index